<template>
    <div class='city subpage'>
        <My-head :title="$route.query.city ? '选择城市 - '+$route.query.city : '选择城市 - ' ">
            <van-icon name="cross" class="hicon" />
        </My-head>

        <!-- 搜索城市 -->
        <van-search
        v-model="keyword"
        placeholder="请输入城市名称或拼音"
        @search="onSearch"
        @cancel="onCancel"
        show-action
        />

        <div v-if="flag">
            <!-- 热门城市 -->
            <div class="hot-city">
                <div class="city-index-title">热门城市</div>
                <ul>
                    <li @click="chooseCity(l)" v-for="(l, i) in hotCity" :key="i">
                        <p class="city-item-text">
                            {{ l.name }}
                        </p>
                    </li>
                </ul>
            </div>

            <!-- 城市列表 -->
            <van-index-bar>
                <div v-for="(l,i) in pylist"  :key="i">
                    <van-index-anchor :index="l" />
                    <van-cell  @click="chooseCity(item)" :title="item.name" v-for="(item,index) in cityList.filter(v=>v.pinyin.indexOf(l.toLowerCase())=='0')" :key="index"/>
                </div>
            </van-index-bar>
        </div>

        <div v-else>
            <van-cell-group v-if="searchList.length>0">
                <van-cell
                v-for="(l,i) in searchList"
                :key="i"
                :title="l.name"
                @click="chooseCity(l)"
                >
                </van-cell>
            </van-cell-group>
            
            <!-- 搜索为空 -->
            <van-empty description="没有找到匹配的城市" v-else />
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            keyword: '',
            searchList: [], // 搜索的城市列表
            flag:true,  // 不显示搜索
            pylist: [
                'A',
                'B',
                'C',
                'D',
                'E',
                'F',
                'G',
                'H',
                // 'I',
                'J',
                'K',
                'L',
                'M',
                'N',
                // 'O',
                'P',
                'Q',
                'R',
                'S',
                'T',
                // 'U',
                // 'V',
                'W',
                'X',
                'Y',
                'Z'
            ]
        }
    },
    methods:{
        onSearch(value) {
            console.log(value)
            this.flag = false
            this.searchList = this.cityList.filter(item => 
                (item.pinyin.indexOf(value) > -1 || item.name.indexOf(value) > -1)
            )
        },
        onCancel() {
            console.log("cancel")
            this.flag = true
            this.searchList = []
        },
        chooseCity(city){
            console.log(city)
            this.changeCity(city)
            this.$router.go(-1)
        }
    },
    beforeRouteLeave(to, from, next) {
        if(this.city) {
            next()
        } else {
            this.$toast('请选择城市')
            next(false)
        }
    },
    created() {
        if(!this.cityList.length > 0) { // 减少http请求次数
            this.$ajax.getMaiData({
                k: 5398252 // 可不传
            },{
                'X-Host': 'mall.film-ticket.city.list'
            })
            .then(res => {
                console.log(res)
                this.changeCityList(res.data.cities)
            })
        }
    },
}
</script>

<style lang="scss">

.van-search {
    background-color: #f4f4f4;
    height: 49px;
    .van-search__content {
        background-color: white;
        border-radius: 3px;
    }
}

.hot-city {
    padding-left: 15px;
    padding-top: 15px;
    .city-index-title {
        font-size: 13px;
        color: #797d82;
        margin-bottom: 10px;
    }
    ul {
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -ms-flex-line-pack: center;
        align-content: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        li {
            width: calc(33.33333vw - 11px);
            text-align: center;
            padding-bottom: 15px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            float: left;
            .city-item-text {
                height: 30px;
                background-color: #f4f4f4;
                line-height: 30px;
                border-radius: 3px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                margin: 0 7.5px;
                font-size: 14px;
                color: #191a1b;
            }
        }
    }
}

</style>